<template>
  <div>
    <Card>
      <template>
        <Form ref="search" :model="search" :label-width="80">
          <Row>
            <!-- <Col span="5" v-if="managerFlag">
                <FormItem label="线索分组：" prop="groupId">
                  <Select v-model="search.groupId" style="width:200px" :filterable="true">
                    <Option value>全部</Option>
                    <Option
                      :value="item.value"
                      v-for=" item in searchGroups"
                      :key="item.value"
                    >{{item.label}}</Option>
                  </Select>
                </FormItem>
            </Col>-->
            <Col span="5">
              <FormItem label="统计时间:" prop="staticDate">
                <DatePicker
                  format="yyyy-MM-dd"
                  type="date"
                  placeholder="统计时间"
                  :editable="false"
                  :value="search.staticDate"
                  @on-change="search.staticDate=$event"
                  :options="endDateoptions"
                  :clearable="false"
                  style="width:200px"
                ></DatePicker>
              </FormItem>
            </Col>

            <Col span="5">
              <FormItem :label-width="0">
                <Button type="primary" @click="query()">查詢</Button>
                <!-- <Button style="margin-left: 8px" @click="download()">
                  <Icon type="ios-cloud-download-outline" />下载线索
                </Button>-->

                <Button @click="changeTableOrReport()">
                  <Icon type="ios-repeat" />切换
                </Button>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </template>
      <RortTable v-show="!chartFlag" :search="search" :type="type" ref="tableComponets"></RortTable>
      <ReportChart
        v-show="chartFlag"
        :search="search"
        :type="type"
        ref="chartComponets"
        :searchAssigneTos="searchAssigneTos"
      ></ReportChart>
    </Card>
  </div>
</template>
<script>
import { post } from "@/libs/axios-cfg";
import { checkRole, allRoles } from "@/libs/util";
import RortTable from "../componets/reportTable.vue";
import ReportChart from "../componets/reportChart.vue";

export default {
  data() {
    return {
      adminFlag: false,
      managerFlag: false,
      salesFlag: false,
      searchAssigneTos: [],
      searchGroups: [],
      type: "my",
      chartFlag: true,
      search: {
        staticDate: ""
      },
      endDateoptions: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now();
        }
      }
    };
  },
  created() {
    this.salesFlag = checkRole(allRoles.sales);
    this.managerFlag = checkRole(allRoles.manager);
    this.adminFlag = checkRole(allRoles.admin);
    var routeName = this.$route.name;
    var obj =
      Object.keys(this.$route.params).length > 0
        ? this.$route.params
        : this.$store.state.app.tagParams[routeName];
    if (obj && Object.keys(obj).length > 0) {
      this.search = obj;
    }
    this.getQueryConfig();
  },
  methods: {
    getQueryConfig() {
      var url = "/report/getQueryConfig";
      this.post(url, {}, {}).then(res => {
        if (this.checkIsSsuccess(res)) {
          this.searchAssigneTos = res.data.searchAssigneTos;
          if (!this.search.staticDate) {
            this.search.staticDate = res.data.now;
          }
          this.searchGroups = res.data.searchGroupList;
          this.query();
        } else {
          this.$Message.error({
            content: res["msg"],
            duration: 3,
            closable: true
          });
        }
      });
    },
    changeTableOrReport() {
      this.chartFlag = !this.chartFlag;
      this.query();
    },

    query() {
      if (this.chartFlag) {
        this.$refs.chartComponets.query();
      } else {
        this.$refs.tableComponets.query();
      }
    }
  },
  components: {
    RortTable,
    ReportChart
  }
};
</script>